<template>
	<view>
		<u-cell-group>
			<u-cell title="公众号名称">
				<template #value>
					<view>
						<u-input v-model="form.name" placeholder="请输入公众号名称"></u-input>
					</view>
				</template>
			</u-cell>
			
			<u-cell title="图标">
				<template #value>
					<view>
						<u-upload :fileList="iconFileList" :multiple="false" :max-count="1" 
						@delete="(event)=>deleteFile(event,iconFileList,()=>form.icon_url=null)"
						@afterRead="(event)=>afterRead(event,iconFileList,uploadIcon)">
							
						</u-upload>
					</view>
				</template>
			</u-cell>
			
			<u-cell title="二维码" >
				<template #value>
					<view>
						<u-upload :fileList="qrcodeFileList" :multiple="false" :max-count="1" 
							@delete="(event)=>deleteFile(event,iconFileList,()=>form.qrcorde_url=null)"
							@afterRead="(event)=>afterRead(event,qrcodeFileList,uploadQrcode)">	
						</u-upload>
					</view>
				</template>
			</u-cell>
			
			<u-cell title="AppId">
				<template #value>
					<view>
						<u-input v-model="form.app_id" placeholder="请输入APPID"></u-input>
					</view>
				</template>
			</u-cell>
			
			
			<u-cell title="Secret">
				<template #value>
					<view>
						<u-input v-model="form.secret" placeholder="请输入公众号密钥"></u-input>
					</view>
				</template>
			</u-cell>
			
			<u-cell title="Token">
				<template #value>
					<view>
						<u-input v-model="form.token" placeholder="请输入公众号Token"></u-input>
					</view>
				</template>
			</u-cell>
			
			<u-cell title="AesKey">
				<template #value>
					<view>
						<u-input v-model="form.aes_key" placeholder="请输入公众号AESKEY"></u-input>
					</view>
				</template>
			</u-cell>
			
		</u-cell-group>
	</view>
	
	
	<view style="padding-top: 60px;"></view>
	
	<view @click="showComfirmModal=true" style="
		position: fixed;bottom: 0;
		left:0;right:0;
		height: 60px;
		display: flex;
		align-items: center;
		background-color: white;
		border-top: solid 1rpx #eee;
		"
	>
		<view @click="onCreateComfirm" style="
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10rpx 0rpx;
			border-radius: 10rpx;
			box-shadow: 0 0 14px 0 #66666635;
			border: solid 1rpx #ddd;
			top:10px;bottom: 10px;left:10px;right: 10px; 
			position: absolute;
		">
				确定
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					name:'测试公众号',
					app_id:'wxd96f2c1982b61eb2',
					secret: 'd16523ef6c83a4796853dab4eb79671b',
					token: 'ZEJiycTmUyHzsPEFxEJtTBSOSLgrgXzd',
					aes_key: 'kOGMLaVhOUTRv627uuWsEzfEKleXBTUOmcEGCZGuQYC',
					qrcorde_url:'http://www.apesk.net/static/officeQrcode.jpg',
					icon_url:'http://www.apesk.net/cdn/static/office-qrcode.jpg'
				},
				qrcodeFileList:[],
				iconFileList:[],
				rules:{
					'name': [
						{
							required:true,
							message:'请输入公众号名称'
						}
					],
					'icon_url' : [
						{
							required:true,
							message:'请选择公众号图标'
						}
					],
					'qrcorde_url' : [
						{
							required:true,
							message:'请选择二维码图片'
						},
						{
							type:'url',
							message: '请上传正确的二维码图片'
						}
					],
					'app_id':[
						{
							required : true,
							message: '请输入公众号(订阅号)AppID'
						},
						{
							len : 18,
							message: '请输入正确的32为APPID'
						},
						{
							validator : (rule,value)=>this.$u.test.enOrNum(value),
							message: '请输入AppId只能包含字母和数字'
						}
					],
					'secret':[
						{
							required : true,
							message: '请输入公众号Secret'
						},
						{
							max : 128,
							message: 'Secret长度不能大于128'
						},
						{
							validator : (rule,value)=>this.$u.test.enOrNum(value),
							message: '请输入Secret只能包含字母和数字'
						}
					],
					'token':[
						{
							required : true,
							message: '请输入公众号Token'
						},
						{
							max : 128,
							message: 'Token长度不能大于128'
						},
						{
							validator : (rule,value)=>this.$u.test.enOrNum(value),
							message: '请输入Token只能包含字母和数字'
						}
					],
					'aes_key':[
						{
							required : true,
							message: '请输入公众号AesKey'
						},
						{
							max : 128,
							message: 'AesKey长度不能大于128'
						},
						{
							validator : (rule,value)=>this.$u.test.enOrNum(value),
							message: '请输入AesKey只能包含字母和数字'
						}
					]
				}
			}
		},
		methods: {
			async afterRead(event,filelist,cb)
			{
				console.log(event)
				
				if(cb && await cb(event.file))
				{
					filelist.push({
						...event.file
					})
				}
			},
			async uploadQrcode(file){
				let res = await this.$netTool.handleUploadFile(this.apiUrl('common/storage/upload/image'),file.url,'image','image')
				this.form.qrcorde_url = this.absUrl(res.data.path) //'http://www.apesk.net/static/officeQrcode.jpg'
				return true
			},
			async uploadIcon(file){
				let res = await this.$netTool.handleUploadFile(this.apiUrl('common/storage/upload/image'),file.url,'image','image')
				this.form.icon_url = this.absUrl(res.data.path) //'http://www.apesk.net/static/officeQrcode.jpg'
				return true
			},
			deleteFile(event,filelist,cb){
				filelist.splice(event.index,1)
				if(cb) cb(event)
			},
			async onCreateComfirm(){
				
				try{
					await this.validate(this.rules,this.form)
					
					uni.showLoading({
						title:'正在创建'
					})
					
					const res = await this.$http.post('common/wx/create_account',this.form)
					uni.hideLoading()
					
					uni.showToast({
						title: '创建成功',
						mask:true
					})
					
					setTimeout(function() {
						uni.navigateBack({delta:2})
					}, 1000);
					
				}catch(e){
					//TODO handle the exception
					console.log(e)
					uni.showToast({
						icon:'none',
						title: e.errors[0].message
					})
				}

			}
		}
	}
</script>

<style>

</style>
